<template>
  <view class="container">
    <view class="input-box">
      <textarea v-model="content" maxlength="140" placeholder="请输入内容，比如您这一刻的想法……"></textarea>
      <text class="char-count">{{ content.length }}/140</text>
    </view>
    <view class="image-box">
      <button @click="chooseImage">
        <image src="/static/images/upload.png" class="upload-icon"></image>
      </button>
      <view class="image-preview" v-for="i in images" :key="i">
        <image :src="fileUrl + i" mode="aspectFill"></image>
        <button @tap="removeImage(index)">x</button>
        <!-- <image src="/static/images/x.png"></image> -->
      </view>
    </view>
    <button class="save-button" @tap="save">保存</button>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { postTweetsAPI } from '@/services/index/home'

const content = ref('')
const images = ref([])
const cameraIcon = '/static/camera.png'

// 从本地存储获取用户id
const userInfo = uni.getStorageSync('userInfo')
const token = ref('')
const fileUrl = ref('')
token.value = userInfo.token


const compressPhoto = (imagePath) => {
  const maxSize = 200 * 1024; // 设置最大文件大小为 200KB  
  const step = 10; // 每次迭代减少的压缩质量值  
  let quality = 80; // 初始压缩质量为 80（这个值可以根据需要调整）  
  let isFirstAttempt = true; // 标记是否为第一次尝试压缩  

  return new Promise((resolve, reject) => {
    function compress() {
      if (!isFirstAttempt && quality <= 0) {
        // 如果不是第一次尝试并且质量已经降至0以下，则拒绝Promise  
        reject(new Error('压缩图片失败，无法进一步减小文件大小'));
        return;
      }

      uni.compressImage({
        src: imagePath,
        quality: quality,
        success: function (res) {
          const compressedImagePath = res.tempFilePath;
          uni.getFileSystemManager().getFileInfo({
            filePath: compressedImagePath,
            success: function (fileInfoRes) {
              const fileSize = fileInfoRes.size;
              console.log('压缩后图片大小：', fileSize);

              if (fileSize <= maxSize) {
                // 图片大小符合要求，返回压缩后的图片路径  
                resolve(compressedImagePath);
              } else {
                // 继续迭代压缩图片大小  
                quality -= step;
                retry();
              }
            },
            fail: function (err) {
              // 获取文件信息失败，返回错误信息  
              reject(err);
            }
          });
        },
        fail: function (err) {
          // 压缩图片失败，返回错误信息  
          reject(err);
        }
      });
    }

    function retry() {
      compress();
    }

    uni.getFileSystemManager().getFileInfo({
      filePath: imagePath,
      success: function (res) {
        const originalSize = res.size;
        console.log('压缩前图片大小：', originalSize);

        // 如果图片已经小于或等于maxSize，则直接返回原图片（可选）  
        // 如果想要对所有图片进行压缩尝试，无论其大小如何，请移除下面的if语句  
        if (originalSize <= maxSize) {
          resolve(imagePath); // 或者您可以选择仍然进行压缩，但这里为了简化直接返回  
        } else {
          isFirstAttempt = true; // 重置为第一次尝试压缩的标记  
          retry(); // 开始压缩过程  
        }
      },
      fail: function (err) {
        reject(err);
      }
    });
  });
};





// 选择图片并上传
const chooseImage = async () => {
  if (images.value.length >= 9) {
    uni.showToast({
      title: '最多上传九张图片',
      icon: 'none'
    });
    return;
  }

  uni.chooseImage({
    count: 9 - images.value.length,
    success: async (res) => {
      if (res.tempFilePaths.length >= 9) {
        uni.showToast({
          title: '最多上传九张图片',
          icon: 'none'
        });
        return false
      }
      for (const tempFilePath of res.tempFilePaths) {
        try {
          const compressedFilePath = await compressPhoto(tempFilePath);
          const uploadRes = await uploadImage(compressedFilePath);
          if (uploadRes) {
            images.value.push(uploadRes.imageUrl);
            fileUrl.value = uploadRes.fileUrl;
          }
        } catch (error) {
          console.error('压缩或上传图片时出错:', error);
          uni.showToast({
            title: '上传失败',
            icon: 'none'
          });
        }
      }
    }
  });
};

// 上传图片
const uploadImage = async (filePath) => {
  return new Promise((resolve, reject) => {
    uni.uploadFile({
      url: '/post/api/v1/develop/uploadImage', // 替换为实际的上传接口地址
      filePath: filePath,
      name: 'file',
      // formData: {
      //   user_id: userId,
      //   // 如果有其他表单数据需要上传，可以在这里添加
      // },
      success: (uploadRes) => {
        const response = JSON.parse(uploadRes.data)
        // console.log(response)
        resolve(response.data) // 解析 JSON 数据并返回
      },
      fail: (error) => {
        console.error('上传失败:', error)
        uni.showToast({
          title: '上传失败',
          icon: 'none',
        })
        reject(error)
      },
    })
  })
}

// 移除图片
const removeImage = (index) => {
  images.value.splice(index, 1)
}

// 保存帖子内容
const save = async () => {
  if (!token.value) {
    console.log('111')
    uni.showToast({
      title: '请先登录',
      icon: 'none',
    })
    setTimeout(() => {
      uni.navigateTo({
        url: '/pages/login/login',
      })
    }, 1500)
  } else {
    if (!content.value & (images.value.length === 0)) {
      uni.showToast({
        title: '请输入或选择内容',
        icon: 'none',
      })
      return
    }

    try {
      const data = {
        user_id: userInfo.id,
        content: content.value,
        images: images.value,
      }
      // console.log(data)
      const response = await postTweetsAPI(data)
      uni.showToast({
        title: '发布成功',
        icon: 'none',
      })
    } catch (error) {
      uni.showToast({
        title: '发布失败',
        icon: 'none',
      })
    }

    content.value = ''
    images.value = []
  }
}
</script>
<style scoped>
.container {
  padding: 20px;
}

.input-box textarea {
  width: 100%;
  height: 120px;
}

.char-count {
  display: block;
  text-align: right;
  margin-top: 5px;
}

.upload-icon {
  width: 100rpx;
  height: 100rpx;
  margin-bottom: 10rpx;
}

.image-box {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}

.image-box button {
  width: 80px;
  height: 80px;
  margin: 5px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-preview {
  position: relative;
}

.image-preview image {
  width: 80px;
  height: 80px;
  margin: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.image-preview button {
  position: absolute;
  top: 0;
  right: 0;
  color: red;
  font-size: 40rpx;
  width: 30rpx;
  height: 30rpx;
  border: none;
}

.save-button {
  width: 90%;
  height: 50px;
  line-height: 50px;
  background-color: #0f84d8;
  color: white;
  border: none;
  border-radius: 15px;
  text-align: center;
  margin-top: 25px;
  box-sizing: border-box;
}
</style>
